<template>
	<div class="hot-main">
		<div class="hotop">
			<div class="hotopct">
				<div class="u-hmsprt hoticon"></div>
				<div class="hottime">
					更新日期：03月12日
				</div>
			</div>
		</div>
		<!-- 音乐列表 -->
		<div class="hotcont" v-for="(item,index) in hotsong" :key="item.id">
			<!-- <div class="sglst"> -->
			<!-- 歌曲列表号 -->
			<!-- <div class="sgfl sgfl-cred">
					{{index}}
				</div> -->
			<!-- 歌曲名 -->
			<!-- <div class="sgfr f-bd f-bd-btm">
					<div class="sgchfl">
						<div class="f-thide sgtl">
							{{item.name}}
						</div>
						<div class="f-thide sginfo">
							{{item.ar[0].name}}-{{item.al.name}}
						</div>
					</div>
				</div>
			</div> -->
			<router-link :to="'/song?id='+item.id" class="flexitem">
				<div class="sgfl" :class="{'sgfl-cred':index<3}">
					{{index+1}}
				</div>
				<songlist :songname="item.name" :album="item.ar[0].name" :singer="item.al.name">
					<icon></icon>
				</songlist>
			</router-link>

		</div>
	</div>


</template>

<script>
	import api from "@/config/api.js";
	import songlist from "@/components/base/songlist.vue";
	import icon from "@/components/base/icon.vue";

	export default {
		data() {
			return {
				hotsong: ""
			}
		},
		components: {
			songlist,
			icon
		},
		mounted() {
			this.$axios.get(api.hotsong)
				.then(res => {
					// console.log(res.data.playlist)
					this.hotsong = res.data.playlist.tracks
					// console.log(this.hotsong)
				})
		}
	}
</script>

<style lang="scss" scoped>
	a {
		text-decoration: none;
		color: #333;
	}
	.flexitem {
		display: flex;
	}

	.sgfl {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		font-size: 17px;
		color: #999;
		margin-left: -10px;
		// flex: 1 1 auto;
	}

	.sgfl-cred {
		color: #df3436;
	}

	.hotcont {
		position: relative;
		display: flex;
	}

	.hotop {
		position: relative;
		padding-top: 38.9%;
		overflow: hidden;
		background: url(//s3.music.126.net/mobile-new/img/hot_music_bg_2x.jpg?f01a252…=) no-repeat;
		background-size: contain;
	}

	.top_logo {
		width: 100%;
		height: auto;
	}

	.hotopct {
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 2;
		padding-left: 20px;
		box-sizing: border-box;
	}

	.hotopct .u-hmsprt {
		// background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=) no-repeat;
		background-size: 166px 97px;
		background-position: -24px -30px;
	}

	.hoticon {
		width: 142px;
		height: 67px;
	}

	.hottime {
		margin-top: 10px;
		color: hsla(0, 0%, 100%, .8);
		font-size: 12px;
		transform: scale(.91);
		transform-origin: left top;
	}
</style>
